<template>
  <div class="dndList">
    <el-row :gutter="24">
      <el-col :span="18">
    <el-card class="box-card" shadow="always" style="width: 100%">
      <div slot="header" class="clearfix">
        <span>发送联系人</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="test">操作按钮</el-button>
      </div>
      <draggable :list="list1" :options="{group:'article', disabled: disabled}"
                 @start="start22"
                 @end="end22"
                 class="dragArea11"
                 style="height: 100px">
<!--        <div v-for="(element, index) in list1" :key="element.id" class="list-complete-item">
          <div class="list-complete-item-handle">{{element.name}}</div>
          <div>
            <i class="el-icon-delete" @click="handleDel(index, element.id)"></i>
          </div>
        </div>-->
        <el-tag
          style="margin-right: 5px"
          :key="index"
          v-for="(tag,index) in list1"
          closable
          :disable-transitions="false"
          @close="handleDel(index, tag.id)">
          {{tag.name}}
        </el-tag>
      </draggable>
    </el-card>
      </el-col>
<!--    <div class="dndList-list">
      <h3>常用</h3>
      <draggable :list="list1" :options="{group:'article', disabled: disabled}"
                 @start="start22"
                 @end="end22"
                 class="dragArea11"
                 style="height: 100px">
        <div v-for="(element, index) in list1" :key="element.id" class="list-complete-item">
          <div class="list-complete-item-handle">{{element.name}}</div>
          <div>
            <i class="el-icon-delete" @click="handleDel(index, element.id)"></i>
          </div>
        </div>
      </draggable>
    </div>-->
      <el-col :span="6">
        <el-collapse accordion>
<!--          <draggable :list="list2" :options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}"
                     @end="end"
                     class="dragArea">
            <div v-for="element in list2" :key="element.id"
                 :class="{undraggable : element.flag}"
                 class="list-complete-item">
              <div class="list-complete-item-handle2"> {{element.name}}</div>
            </div>
          </draggable>-->
          <h3>所有</h3>
          <draggable :list="list3" :options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}"
                     @end="end1"
                     class="dragArea">
          <el-collapse-item :title="list.name" :name="index" v-for="(list,index) in testList">
            <draggable :list="list.users"
                       :group="{ name: falgs, pull: 'clone', put: false }"
                       @end="log"
                       class="dragArea">
              <div v-for="(element,index1) in list.users" :key="element.id"
                   :class="{undraggable : element.flag}"
                   class="list-complete-item"
                   :index="index1"
              >
                <div class="list-complete-item-handle2"> {{element.name}} </div>
              </div>
            </draggable>

          </el-collapse-item>
          </draggable>


        </el-collapse>
<!--    <div class="dndList-list">
    &lt;!&ndash;  <h3>所有</h3>&ndash;&gt;
&lt;!&ndash;      <draggable :list="list2" :options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}"
                 @end="end"
                 class="dragArea">
        <div v-for="element in list2" :key="element.id"
             :class="{undraggable : element.flag}"
             class="list-complete-item">
          <div class="list-complete-item-handle2"> {{element.name}}</div>
        </div>
      </draggable>&ndash;&gt;
    </div>-->
        </el-col>
      </el-row>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    name: 'DndList',
    components: { draggable },
    watch: {
    },
    data () {
      return {
        falgs: 'article',
        disabled: false,
        list1: [],
        list2: [{id: 1, name: 1}, {id: 2, name: 2}, {id: 3, name: 3},
          {id: 4, name: 4}, {id: 5, name: 5}, {id: 6, name: 6},
          {id: 7, name: 7}, {id: 8, name: 8}, {id: 9, name: 9}, {id: 10, name: 10}
        ],
        list3:[],
        list4:[],
        testList:[
          {
            id:1,
            name:"朋友",
            users:[
              {
                id:11,
                name:"张三",
                phone:"23431323453",
                flag:false
              },
              {
                id:12,
                name:"李四",
                phone:"23431323453",
                flag:false
              },
              {
                id:13,
                name:"王五",
                phone:"23431323453"
              },
              {
                id:14,
                name:"赵六",
                phone:"23431323453"
              }
            ]
          },
          {
            id:2,
            name:"亲人",
            users:[
              {
                id:21,
                name:"贵的",
                phone:"4565345245"
              },
              {
                id:22,
                name:"发四",
                phone:"567575673"
              },
              {
                id:23,
                name:"规范",
                phone:"345345345"
              },
              {
                id:34,
                name:"电饭锅",
                phone:"dfgdfgdfg"
              }
            ]
          },
          {
            id:3,
            name:"同学",
            users:[
              {
                id:31,
                name:"哈哈",
                phone:"23435765675"
              },
              {
                id:32,
                name:"嘿嘿",
                phone:"32454645654"
              },
              {
                id:33,
                name:"黑河",
                phone:"645643234"
              },
            ]
          }
        ]
      }
    },
    computed: {
    },
    methods: {
      end (ev) {
        console.log(ev)
/*        if (ev.to.className === 'dragArea11') {
          this.$set(this.testList.users[ev.oldIndex], 'flag', true)
        }*/
    /*    console.log(ev);*/
/*        var user={"id":"23452","name":"sdfs","phone":"345345"}
        this.list1.push(user)*/


      },
      end1 (ev){
        if (ev.to.className === 'dragArea11') {
          var length = this.list1.length;
          var listElement = this.testList[ev.oldIndex];
          var users = listElement.users;
          for (var i = 0; i < users.length; i++) {
            this.list1.push(users[i]);
          }
        }
        },
      start22 (event) {
        this.falgs = '222222'
      },
      end22 (ev) {
        this.falgs = 'article'
      },
      handleDel (index, id) {
        this.list1.splice(index, 1)
        let q = this.list2.find((value, index, arr) => {
          return value.id === id
        })
       /* this.$set(q, 'flag', false)*/
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .list-complete-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    box-sizing: border-box;
  }

  .list-complete-item.sortable-chosen {
    background: #4AB7BD;
  }

  .list-complete-item.sortable-ghost {
    background: #30B08F;
  }
  .undraggable {
    background-color: red;
  }

  .list-complete-enter,
  .list-complete-leave-active {
    opacity: 0;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
